<template>
  <div class="home">
    <var-app-bar title="深圳" title-position="center" color="#fff" text-color="rgb(172, 106, 233)">
      <template #left>
        <var-badge type="danger" :value="88">
          <var-chip plain round color="#009688">右上</var-chip>
        </var-badge>
      </template>

      <template #right>
        <var-button text type="primary"> <var-icon name="github" /></var-button>
        <var-button text type="primary"> <var-icon name="magnify" /></var-button>
      </template>
    </var-app-bar>

    <WrapSwiper :list="bannerList"></WrapSwiper>
  </div>
</template>

<script setup lang="ts">
import WrapSwiper from '@/components/wrapSwiper/WrapSwiper.vue'
const homeStore = useHomeStore()
const { bannerList } = storeToRefs(homeStore)
homeStore.pinia_home_getBanner({ bannerType: 1 })
onMounted(() => {
  console.log('mounted')
})
</script>

<style scoped lang="less">
.home {
  height: 100vh;
  background: linear-gradient(140deg, rgba(62, 47, 77, 0.1), rgba(146, 83, 138, 0.7));
  // color: rgb(172, 106, 233);
}
</style>
